// 获取画笔（即：上下文对象）
function getContext(canvas) {
    return canvas.getContext('2d');
}

// 画网格线
function drawGridlines(canvas) {
    // 获取上下文
    let ctx = getContext(canvas);
    // 填充样式
    ctx.fillStyle = '#7f7f7f';
    ctx.fillStyle = '#e0e0e2';
    // 定义间隙
    let gap = 11;
    // 填充横轴 horizontal line 水平线
    let y = 0;
    while (y < canvas.height) {
        if (y > 0 && y < canvas.height - 1) {
            ctx.fillRect(0, y, canvas.width, 1);
        }
        y += gap;
    }
    // 填充纵轴 vertical line 垂直线
    let x = 0;
    while (x < canvas.width) {
        if (x > 0 && x < canvas.width - 1) {
            ctx.fillRect(x, 0, 1, canvas.height);
        }
        x += gap;
    }
}

// 画中心线
// 注意：再图像绘制完成后调用，避免中心线被覆盖。
function drawCenterline(canvas) {
    // 获取上下文
    let ctx = getContext(canvas);
    let w = canvas.width;
    let h = canvas.height;
    let x = Math.round(w / 2);
    let y = Math.round(h / 2);
    // 填充样式
    ctx.fillStyle = '#fff699';
    ctx.fillStyle = 'yellow';
    // 填充横轴
    ctx.fillRect(0, y, w, 1);
    // 绘制纵轴
    ctx.fillRect(x, 0, 1, h);
}
